<template>
    <div class="container">
        <el-row>
            <el-tag class="question_type" type="primary">单选题</el-tag> 
            <span class="current_question">1</span>/<span class="total_question">1804</span>
            这是题目的题干这是题目的题干这是题目的题干这是题目的题干这是题目的题干
        </el-row>
        <el-row class="answer"><el-radio v-model="answer" label="A">选项A</el-radio></el-row>
        <el-row class="answer"><el-radio v-model="answer" label="B">选项B</el-radio></el-row>
        <el-row class="answer"><el-radio v-model="answer" label="C">选项C</el-radio></el-row>
        <el-row class="answer"><el-radio v-model="answer" label="D">选项D</el-radio></el-row>
        <el-row class="toolbar">
            <el-button type="primary">上一题</el-button>
            <el-button type="primary">下一题</el-button>
        </el-row>
        <el-row class="footer">
            <el-col :span="2"><el-button type="warning" icon="el-icon-star-off" round size="small">收藏</el-button></el-col>
            <el-col class="right_num" :span="2">做对：1804</el-col>
            <el-col class="wrong_num" :span="2">做错：1804</el-col>
            <el-col :span="4">正确率：99%</el-col>
            <el-col :span="4">    
                <el-button type="primary" size="small" plain v-on:click="show = !show">{{show ? '隐藏' : '显示'}}答题卡</el-button>
            </el-col>
        </el-row>
        <div v-if="show">
            <ul class="answer_sheet">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li>29</li>
                <li>30</li>
                <li>31</li>
                <li>32</li>
                <li>33</li>
                <li>34</li>
                <li>35</li>
                <li>36</li>
                <li>37</li>
                <li>38</li>
                <li>39</li>
                <li>40</li>
                <li>41</li>
                <li>42</li>
                <li>43</li>
                <li>44</li>
                <li>45</li>
                <li>46</li>
                <li>47</li>
                <li>48</li>
                <li>49</li>
                <li>50</li>
                <li>51</li>
                <li>52</li>
                <li>53</li>
                <li>54</li>
                <li>55</li>
                <li>56</li>
                <li>57</li>
                <li>58</li>
                <li>59</li>
                <li>60</li>
                <li>61</li>
                <li>62</li>
                <li>63</li>
                <li>64</li>
                <li>65</li>
                <li>66</li>
                <li>67</li>
                <li>68</li>
                <li>69</li>
                <li>70</li>
                <li>71</li>
                <li>72</li>
            </ul>
        </div>
        <div class="question_explanatioin">
            <h3 class="explanation_title">试题详解</h3>
            <div class="explanation_body">
                违反《道路交通安全法》，属于违法行为。官方已无违规、违章的说法。
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        answer: '',
        show: false,
      };
    }
  }
</script>

<style lang="less" scoped>
.container{
    text-align: left;
    .question_type{
        margin-right: 10px;
    }
    .current_question{
        font-weight: bold;
    }
    .answer{
        margin-top: 10px;
    }
    .toolbar{
        margin-top: 30px;
    }
    .footer{
        margin-top: 30px;
        display: flex;
        align-items: center;
        .right_num{
            color: #67C23A;
        }
        .wrong_num{
            color: #F56C6C;
        }
    }
    .answer_sheet{
        margin-top: 10px;
        list-style: none;
        height: 100px;
        border: 1px solid #e9e9e9;
        overflow: auto;
        
        li{
            float: left;
            width: 5%;
            height: 30px;
            line-height: 30px;
            border-right: 1px solid #e9e9e9;
            border-bottom: 1px solid #e9e9e9;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
        }
    }
    .question_explanatioin{
        margin-top: 20px;
        .explanation_title{
            border-bottom: 1px solid #e9e9e9;
            margin-bottom: 20px;
        }
    }
}

</style>